<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Login Form Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body>
<main role="main" class="container mt-3 mb-3">
    <div class="row">
        <div class="col-md">
            <!-- Login form template begins here -->
            <div th:fragment="loginform" class="card">
                <div class="card-header" th:if="${delegatedAuthenticationProviderPrimary == null}"
                     th:replace="fragments/serviceui :: serviceUI">
                    <a href="fragments/serviceui.html">service ui fragment</a>
                </div>
                <div class="card-body">
                    <form method="post" id="fm1" th:object="${credential}" action="login">
                        <div class="alert alert-danger alert-dismissible fade show" th:if="${#fields.hasErrors('*')}">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <span th:each="err : ${#fields.errors('*')}" th:utext="${err + ' '}">Example error</span>
                        </div>

                        <div th:if="${existingSingleSignOnSessionAvailable}">
                            <h6>
                                <i class="fas fa-info-circle"></i>&nbsp;
                                <span th:utext="#{screen.welcome.forcedsso(${existingSingleSignOnSessionPrincipal.id})}" />
                            </h6>
                        </div>
                        <h3 th:unless="${existingSingleSignOnSessionAvailable}"
                            style="text-align: center; margin-top:-15px">
                            <i class="fas fa-id-card"></i>
                            <span th:utext="#{screen.welcome.instructions}">Enter your Username and Password:</span>
                        </h3>
                        
                        <section class="form-group">
                            <span th:if="${availableAuthenticationHandlerNames != null}">
                                <span th:if="${availableAuthenticationHandlerNames.size() > 1}">
                                    <label for="source" th:utext="#{screen.welcome.label.source}">Source</label>
                                    <div>
                                        <select class="form-control required"
                                                id="source"
                                                name="source"
                                                tabindex="0"
                                                th:field="*{source}">
                                            <option th:each="handler : ${availableAuthenticationHandlerNames}"
                                                    th:value="${handler}" th:text="${handler}">Source</option>
                                        </select>
                                    </div>
                                </span>
                                <span th:if="${availableAuthenticationHandlerNames.size() == 1}">
                                     <input type="hidden"
                                            id="source"
                                            name="source"
                                            th:value="${availableAuthenticationHandlerNames.get(0)}"/>
                                </span>
                            </span>
                        </section>

                        <section class="form-group">
                            <span th:utext="#{screen.welcome.label.netid}">Username</span>

                            <div th:if="${openIdLocalId}">
                                <strong>
                                    <span th:utext="${openIdLocalId}"/>
                                </strong>
                                <input type="hidden"
                                       id="username"
                                       name="username"
                                       th:value="${openIdLocalId}"/>
                            </div>
                            <div th:unless="${openIdLocalId}">
                                <input class="form-control required"
                                       id="username"
                                       size="25"
                                       tabindex="1"
                                       type="text"
                                       th:disabled="${guaEnabled}"
                                       th:field="*{username}"
                                       th:accesskey="#{screen.welcome.label.netid.accesskey}"
                                       autocomplete="off"/>
                            </div>
                        </section>

                        <section class="form-group">
                            <span th:utext="#{screen.welcome.label.password}">Password</span>

                            <div>
                                <input class="form-control required"
                                       type="password"
                                       id="password"
                                       size="25"
                                       tabindex="2"
                                       th:accesskey="#{screen.welcome.label.password.accesskey}"
                                       th:field="*{password}"
                                       autocomplete="off"/>
                                <span id="capslock-on" style="display:none;">
                                <p>
                                    <i class="fa fa-exclamation-circle"></i>
                                    <span th:utext="#{screen.capslock.on}"/>
                                </p>
                            </span>
                            </div>
                        </section>

                        <section class="form-group">
                            <div th:each="entry: ${customLoginFormFields}">
                                <div>
                                    <span th:text="#{${entry.value.messageBundleKey}}">Label</span>
                                    <input class="form-control required" type="text" name="data" th:field="*{customFields[__${entry.key}__]}">
                                    <p/>
                                </div>
                            </div>
                        </section>

                        <section class="form-check"
                                 th:if="${passwordManagementEnabled != null && passwordManagementEnabled && param.doChangePassword != null}">
                            <p>
                                <input type="checkbox" name="doChangePassword" id="doChangePassword"
                                       value="true" th:checked="${param.doChangePassword != null}" tabindex="4"/>
                                <label for="doChangePassword" th:text="#{screen.button.changePassword}">Change Password</label>
                            </p>
                        </section>

                        <section class="form-check" th:if="${rememberMeAuthenticationEnabled}">
                            <p>
                                <input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5"/>
                                <label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Me</label>
                            </p>
                        </section>

                        <span th:if="${recaptchaVersion=='v2'}" th:remove="tag">
                            <section class="form-group" th:if="${recaptchaSiteKey != null AND recaptchaInvisible != null AND !recaptchaInvisible}">
                                <div class="g-recaptcha" th:attr="data-sitekey=${recaptchaSiteKey}"/>
                            </section>
                        </span>
                        <span th:if="${recaptchaVersion=='v3'}" th:remove="tag">
                              <input type="hidden" id="g-recaptcha-token" name="g-recaptcha-token"/>
                        </span>
                        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                        <input type="hidden" name="_eventId" value="submit"/>
                        <input type="hidden" name="geolocation"/>

                        <p th:if="${#request.getMethod().equalsIgnoreCase('POST')}">
                            <span th:each="entry : ${httpRequestInitialPostParameters}" th:remove="tag">
                                <span th:each="entryValue : ${entry.value}" th:remove="tag">
                                    <input type="hidden" th:name="${entry.key}" th:value="${entryValue}" />
                                </span>
                            </span>
                        </p>
                        
                        <input class="btn btn-block btn-submit"
                               th:if="${recaptchaSiteKey == null}"
                               name="submit"
                               accesskey="l"
                               th:value="#{screen.welcome.button.login}"
                               tabindex="6"
                               type="submit"
                               value="Login8"
                        />

                        <span th:if="${recaptchaVersion=='v2'}" th:remove="tag">
                            <input class="btn btn-block btn-submit"
                                   th:unless="${recaptchaSiteKey != null AND recaptchaInvisible != null AND recaptchaInvisible}"
                                   name="submit"
                                   accesskey="l"
                                   th:value="#{screen.welcome.button.login}"
                                   tabindex="6"
                                   type="submit"
                                   value="Login3"
                            />
                            <button class="btn btn-block btn-submit g-recaptcha"
                                    th:if="${recaptchaSiteKey != null AND recaptchaInvisible != null AND recaptchaInvisible}"
                                    th:attr="data-sitekey=${recaptchaSiteKey}, data-badge=${recaptchaPosition}"
                                    data-callback="onRecaptchaV2Submit"
                                    name="submitBtn"
                                    accesskey="l"
                                    th:text="#{screen.welcome.button.login}"
                                    tabindex="6"
                            />
                        </span>

                        <span th:if="${recaptchaVersion=='v3'}" th:remove="tag">
                            <input class="btn btn-block btn-submit"
                                   th:if="${recaptchaSiteKey != null}"
                                   name="submit"
                                   th:attr="data-sitekey=${recaptchaSiteKey}"
                                   accesskey="l"
                                   th:value="#{screen.welcome.button.login}"
                                   tabindex="6"
                                   type="submit"
                                   value="Login3"
                            />
                         </span>
                    </form>

                    <div th:replace="fragments/pmlinks :: pmlinks"/>

                    <script type="text/javascript" th:inline="javascript">
                        /*<![CDATA[*/
                        var i = /*[[@{#{screen.welcome.button.loginwip}}]]*/
                        var j = /*[[@{#{screen.welcome.button.login}}]]*/
                            /*]]>*/
                            $(window).on('pageshow', function(){
                                $(':submit').prop('disabled', false);
                                $(':submit').attr('value', j);
                            });
                            $(document).ready(function () {
                                $("#fm1").submit(function () {
                                    $(":submit").attr("disabled", true);
                                    $(":submit").attr("value", i);
                                    return true;
                                });
                            });
                    </script>

                    <div th:replace="fragments/loginsidebar :: loginsidebar"/>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>
